
<template>
	<div id="add-blog">
		<h1>个人博客</h1>
		<form v-if="!submitted">
			<label>博客标题</label>
			<input type="text" v-model="blog.title" required="required" />
			
			<label>博客内容</label>
			<textarea v-model="blog.content"></textarea>
			
			<label>分类</label>
			<div id="checkboxes">
				<label>vue</label><input type="checkbox" value="vue" v-model="blog.categories"/>
				<label>react</label><input type="checkbox" value="react" v-model="blog.categories" />
				<label>angular</label><input type="checkbox" value="angular" v-model="blog.categories" />
				<label>php</label><input type="checkbox" value="php" v-model="blog.categories" />
			</div>
			
			<label>作者：</label>
			<select v-model="blog.author">
				<option v-for="author in authors">{{author}}</option>
			</select>
			
			<button v-on:click.prevent="submitBlog">添加博客</button>
		</form>
		
		<h3 class="red" v-if="submitted">发布成功</h3>
		
		<div id="preview">
			<h3>博客总览</h3>
			<p>博客标题:{{blog.title}}</p>
			<p>博客内容:</p>
			<p>{{blog.content}}</p>
			<p>博客分类:</p>
			<ul>
				<li v-for="category in blog.categories">{{category}}</li>
			</ul>
			<p>作者:</p>
			<p>{{blog.author}}</p>
		</div>
	</div>
</template>

<script>
	export default{
		name:"add-blog",
		data(){
			return{
				blog:{
					title:"",
					content:"",
					categories:[],
					author:""
				},
				authors:["tom","lily","jack"],
				submitted:false
			}
		},
		methods:{
			submitBlog:function(){
				const self=this;
				this.$http.post("https://jsonplaceholder.typicode.com/posts",{
					title:self.blog.title,
					body:self.blog.content,
					userId:2
				})
				.then(function(response){
					console.log(response);
					self.submitted=true;
				});
			}
		}
	}
</script>

<style scoped="scoped">
	#add-blog{
		padding:20px;
		margin:20px auto;
	}
	.red{
		color:red;
	}
	label{
		display: block;
		margin:10px auto;
	}
	#preview{
		border:1px dotted #ccc;
		margin:20px auto;
		padding:20px;
	}
</style>